<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li {
            float:left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px red solid;
            /* 结构中有1+1=2的效果，两个li之间会有两个像素的边框，利用margin-left可以解决这个问题
                但是可能会想，所有的li都想左移动1个像素，不是还是存在两个像素的边框吗？
                真实情况下，li的渲染是一个一个渲染的，先渲染第一个li，它向左移动一个像素后再渲染第二个li
                ，第二个也向左移动一个像素，这样就避免了两个像素重合的问题，后续几个li是一样的
            */
            margin-left: -1px;
        }
         /* 如果盒子没有定位，直接给盒子添加相对定位即可 */
        /* ul>li:hover {
            position: relative;
            border-color: blue;
        } */
        /* 如果盒子有定位，给定位的盒子添加层级 */
        ul>li:hover {
            position: relative;
            border-color: blue;
            z-index: 1;
        }
    </style>
</head>
<body>
    <!-- 
        巧妙利用一个技术更快更好的布局:

        1.margin负值的运用
        2.文字围绕浮动元素
        3.行内块的巧妙运用
        4.css三角强化

     -->
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
     </ul>
</body>
</html>